<script setup>
import JobListing from "@/components/JobListing.vue";
import { ref } from "vue";
import { reactive } from "vue";
import { defineProps } from "vue";
import { onMounted } from "vue";
import axios from "axios";
import PulseLoader from "vue-spinner/src/PulseLoader.vue";

defineProps({
    limit: Number,
    showButton: {
        type: Boolean,
        default: false
    }
});

const state = reactive({
    jobs: [],
    isLoading: true
});

onMounted(async () => {
    try {
        const response = await axios.get("/api/jobs");
        state.jobs = response.data;
    } catch (error) {
        console.error("Error fetching jobs", error);
    } finally {
        state.isLoading = false;
    }
});
</script>

<template>
    <!-- Browse Jobs -->
    <section class="bg-green-50 px-4 py-10">
        <div class="container-xl lg:container m-auto">
            <h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
                Browse Jobs
            </h2>
            <!-- Loading Spinner -->
            <div v-if="state.isLoading === true" class="text-center text-gray-500 py-6">
                <PulseLoader />
            </div>

            <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <JobListing v-for="job in state.jobs.slice(0, limit || state.jobs.length)" v-bind:key="job.id"
                    v-bind:job="job" />
            </div>
        </div>
    </section>

    <section v-if="showButton === true" class="m-auto max-w-lg my-10 px-6">
        <a href="/jobs" class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700">View
            All Jobs</a>
    </section>
</template>
